<!--
 * @Author: your name
 * @Date: 2021-12-25 02:13:15
 * @LastEditTime: 2021-12-25 12:45:19
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\50htmljs\drink\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>喝水记录</h1>
    <h3>目标2升</h3>

    <div class="cup">
        <div class="remained" id="remained">
            <span id='liters'></span>
            <small>剩余</small>
        </div>
        <div class="percentage" id="percentage"></div>
    </div>

    <p class="text">选择你喝了多少杯水</p>

    <div class="cups">
        <div class="cup cup-small" data-index="0">250 ml</div>
        <div class="cup cup-small" data-index="1">250 ml</div>
        <div class="cup cup-small" data-index="2">250 ml</div>
        <div class="cup cup-small" data-index="3">250 ml</div>
        <div class="cup cup-small" data-index="4">250 ml</div>
        <div class="cup cup-small" data-index="5">250 ml</div>
        <div class="cup cup-small" data-index="6">250 ml</div>
        <div class="cup cup-small" data-index="7">250 ml</div>
      </div>
  
      <script src="script.js"></script>

</body>
</html>
